<template>
  <div class="flex">
    <a-calendar
      v-model="value"
      mode="date"
      value-format="YYYY-MM-DD"
    ></a-calendar>

    <a-calendar
      v-model="value"
      mode="month"
      value-format="YYYY-MM-DD"
    ></a-calendar>
    <a-calendar
      v-model="value"
      mode="week"
      value-format="YYYY-MM-DD"
    ></a-calendar>
    <a-calendar
      v-model="value"
      mode="year"
      value-format="YYYY-MM-DD"
    ></a-calendar>
    绑定的值{{ value }}
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const value = ref(new Date("2023-01-01"));
</script>

<style lang="scss" scoped>
.flex {
  // height: 100vh;
  padding: 200rpx 20rpx;
  background: #ffffff;
}
</style>
